/*
 * @Author: wyq@zzj 
 * @Date: 2019-03-28 10:54:13 
 * @Last Modified by: wyq@zzj
 * @Last Modified time: 2019-03-28 11:00:47
 */
import { Component, OnInit, Input, Output, EventEmitter, TemplateRef, Directive, HostListener } from '@angular/core';
import { ZzTreeNode } from './zzj-tree.model';
import { Subject, Observable } from 'rxjs';
@Component({
  selector: 'app-zzj-tree',
  templateUrl: './zzj-tree.component.html',
  styleUrls: ['./zzj-tree.component.scss']
})
export class ZzjTreeComponent implements OnInit {
  @Input() public zzNodeTpl: TemplateRef<void>; // 节点目录模板（可选）
  @Input() public zzContextMenuTpl: TemplateRef<void>; // 右键菜单模板（可选）
  @Input('node') public departTree: Array<ZzTreeNode> = [];
  @Input('isMultiple') public isMultiple = false; // 是否可以多选
  @Output('onClick') public onClick = new EventEmitter<ZzTreeNode>()
  @Output('onDblClick') public onDblClick = new EventEmitter<void>()
  @Output('onMenuCheck') public onMenuCheck = new EventEmitter();
  private TimeFn = null;  // 阻止dblclick触发click
  // public departTree = [];

  public rightMenuPosition = {
    top: 0,
    left: 0
  };
  public get rightMenuStyle() {
    return {
      left: this.rightMenuPosition.left + 'px',
      top: this.rightMenuPosition.top + 'px'
    };
  }
  public showRight = false;
  public isRootCreate = false;

  public currentItem: any;
  public updateFromName: string;

  private selectedNodeList: Array<ZzTreeNode> = [];

  public constructor(
  ) { }

  public ngOnInit() {
  }
  public hasArray = [];
  // currItem: ModelLinkViewModel;

  public async isChecked(item) {
    this.onMenuCheck.emit(item);
  }

  /**
   * 双击
   * @param event 
   * @param node 
   */
  dblClick(event: MouseEvent, node: ZzTreeNode): void {
    event.preventDefault();
    event.stopPropagation();
    clearTimeout(this.TimeFn);
    node.isExpanded = !node.isExpanded;
    this.onDblClick.emit()
  }

  /**
  * set node selected status
  */
  setNodeActive(event: MouseEvent, node: ZzTreeNode): void {
    event.preventDefault();
    event.stopPropagation();
    clearTimeout(this.TimeFn);
    //执行延时
    let _this = this;
    this.TimeFn = setTimeout(function () {
      node.isSelected = !node.isSelected;
      if (!_this.isMultiple && node.isSelected) {
        _this.selectedNodeList.forEach(n => {
          if (node.id !== n.id) {
            // reset other nodes
            n.isSelected = false;
          }
        });
        // single mode: remove pre node
        _this.selectedNodeList = [];
        _this.onClick.emit(node)
      }
      _this.setSelectedNodeList(node, this.isMultiple);
    }, 200);

  }

  /**
   * add or remove node to selectedNodeList
   */
  setSelectedNodeList(node: ZzTreeNode, isMultiple: boolean = false): void {
    let index = this.selectedNodeList.findIndex(n => node.id === n.id);
    if (isMultiple) {
      if (node.isSelected && index === -1) {
        this.selectedNodeList.push(node);
      }
    } else {
      if (node.isSelected && index === -1) {
        this.selectedNodeList = [node];
      }
    }
    index = this.selectedNodeList.findIndex(n => node.key === n.key);
    if (!node.isSelected && index > -1) {
      this.selectedNodeList.splice(index, 1);
    }
  }

  getSelectedNodeList() {
    return this.selectedNodeList;
  }
  
  /**
   * 显示右键菜单
   * @param item 
   * @param ev 
   */
  public onRightClick(item, ev: MouseEvent) {
    this.currentItem = item;
    this.showRight = true;
    this.rightMenuPosition = {
      top: ev.clientY + 10,
      left: ev.clientX + 10
    };
    ev.stopPropagation();
    return false;
  }


  public isExpanded(item: ZzTreeNode) {
    item.isExpanded = !item.isExpanded;
  }

  public createMenu() {
    this.showRight = false;
    if (this.isRootCreate) {
      this.currentItem = null;
    }
  }



  public closeRightMenu() {
    this.showRight = false;
  }


  public editMenu() {
    this.updateFromName = this.currentItem.name;
  }


}
